<template>
  <div class="fixed-header fixed-footer">
    <x-header in-app-close>最近开奖</x-header>
    <div class="bg-white text-center py-3">
      <div class="text-grey mb-3">第{{issue.lotteryNo}}期<i class="mx-2"></i>{{issue.prizeTime}}</div>
      <b class="ball on mx-1" v-for="b in balls" v-text="b"></b>
    </div>

    <div class="bg-white px-5 mt-3 py-3">
      <div class="d-flex text-grey px-5 pb-2">
        <div class="mr-auto">奖级</div>
        <div>每注奖金</div>
      </div>
      <div class="d-flex px-5 py-1 mb-2 bg-red" v-for="r in rules">
        <div class="mr-auto">{{r.name}}</div>
        <div class="text-red">{{r.bonus}}</div>
      </div>
    </div>

    <footer class="bg-white text-center p-2 bt-l">
      <a @click="jump('/hubei11c5')" class="btn btn-danger">继续选择本彩种</a>
    </footer>

  </div>
</template>

<script>
import { rules } from './calculator'
import { jump } from '../../router'
import http from '../../http'

export default {
  name: 'hubei11c5-prize',
  data: () => ({
    issue: {}
  }),
  beforeRouteEnter (to, from, next) {
    http.post('/highfreq/hubei11c5', to.query).then(issue => {
      next(vm => {
        vm.issue = issue
      })
    })
  },
  methods: {jump},
  computed: {
    rules () {
      return Object.keys(rules).filter(k => k.indexOf('l') != 0).map(k => rules[k])
    },
    balls () {
      var {results} = this.issue
      return results ? results.split('|') : []
    }
  }
}
</script>
